<?php
include 'logic_layer.php';

if (!isset($_SESSION)) {
    session_start();
}

//make sure the session starts from the index page
//and that the session step matched current page
if (!isset($_SESSION["step"]) || $_SESSION["step"] != "welcome") {
    header('Location: index.php');
}
?>

<!DOCTYPE html>
<html>
    <head>
        <title>Welcome</title>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <!-- Bootstrap -->
        <link href="assets/js/bootstrap/css/bootstrap.min.css" rel="stylesheet" media="screen">
        <!-- Main -->
        <link href="main.css" rel="stylesheet" media="screen">

    </head>

    <body>
        <!-- Part 0: Steps -->
        <div class="navbar navbar-fixed-top">
            <div class="navbar-inner">
                <div class="steps">
                    <!--<p class="steps-done"></p>-->
                    <p class="step-current">Welcome</p>
                    <p class="steps-pending"> &#10140; Choose Scenario &#10140; Describe Experience &#10140; Questionnaires</p>
                </div>
            </div>
        </div>

        <!-- Part 1: Wrap all page content here -->
        <!-- Begin page content -->
        <div class="container">
            <div class="page-header">
                <h1>Dear Participant, Welcome!</h1>
            </div>
            <p class="lead">Thanks for taking the time to participate in this experiment.</p>
            <p>Before we proceed, please read the following consent form. If you agree with its terms, and wish to participate in the study, please check the box at the bottom before clicking "Continue" to move on.</p>
            <div>
                <br>
                <textarea readonly class="field span8" id="textarea" rows="8"><?php
                    $handle = @fopen("resources/consentform", "r");
                    if ($handle) {
                        while (($buffer = fgets($handle, 4096)) !== false) {
                            echo $buffer;
                        }
                        if (!feof($handle)) {
                            echo "Error: unexpected fgets() fail\n";
                        }

                        fclose($handle);
                    }
                    ?></textarea>
            </div>

            <label class="checkbox">
                <input id="agreed" type="checkbox"> I have read and understood the information on this form and had all of my questions answered.
            </label>
            <br><br>

            <form action='index.php' method='post' name='frm'>
                <p>Please enter your email address if you would like to be contacted later for a more detailed interview (this is optional):</p>
                <input onkeyup="checkEmail()" type='text' id='textbox' name='email'><b id="alert" style="margin-left: 10px;color: red;display: none;">Please enter a valid email address</b>

                <input type='hidden' value='cfq0' name="step" />
            </form>

            <button class="btn btn-success btn-large" onclick="continueStudy();" type="button">Continue</button>
            <br>
            <br>
        </div>





        <!-- Le javascript
        ================================================== -->
        <script src="assets/js/jquery/jquery-2.0.3.min.js"></script>
        <script src="assets/js/bootstrap/js/bootstrap.min.js"></script>
        <script src="assets/js/bootbox/bootbox.min.js"></script>

        <script>
                var timer;
                // =============
                // =============
                var checkEmail = function() {
                    if (timer) {
                        window.clearInterval(timer);
                        $("#alert").css('display', 'none');
                    }

                    timer = window.setInterval(emailkup, 1500)
                }
                // =============
                // =============
                var emailkup = function() {
                    window.clearInterval(timer);
                    var emailStr = $("#textbox").val();
                    if (!validateEmail(emailStr)) {
                        $("#alert").css('display', 'inline');
                    } else {
                        $("#alert").css('display', 'none');
                    }
                }

                // =============
                //=============
                var validateEmail = function(emailStr) {
                    var emailRegexStr = /^[a-zA-Z0-9._-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,4}$/;
                    return emailRegexStr.test(emailStr) || emailStr == '';
                }

                // =============
                // =============
                var continueStudy = function() {
                    if ($("#agreed").is(":checked")) {
                        var emailStr = $("#textbox").val();
                        if (emailStr !== '') {
                            //check the validity of the given email address
                            if (validateEmail(emailStr)) {
                                // go to the next step
                                document.frm.submit();
                            } else {
                                bootbox.alert("Please enter a valid email address or leave the textbox empty");
                            }
                        } else {
                            // go to the next step
                            document.frm.submit();
                        }
                    } else {
                        bootbox.alert("Sorry, you must agree to the consent form before proceeding");
                    }
                }
        </script>
    </body>
</html>
